<template>
	<view class="evaluateTalk">
		<view class="talk">
			<view class="talk_t">
				<view class="author">
					<image :src="details.userAvatar || details.avatar" mode="aspectFill"></image>
					<view class="">
						<view class="author_name">{{ details.userName || details.realName || '佚名' }}</view>
						<view class="time">{{details.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="talk_b">
				<view class="article_text" v-html="details.content"></view>
				<view class="article_imgs" v-if="details.imagesList&&details.imagesList.length">
					<block v-for="(img,i) in details.imagesList" :key=" img">
						<image :src="img" mode="aspectFill" @tap="previewImg(i)"></image>
					</block>
				</view>
				<view class="article_imgs" v-if="details.imgs&&details.imgs.length">
					<block v-for="(img,i) in details.imgs" :key=" img">
						<image :src="img" mode="aspectFill" @tap="previewImg(i)"></image>
					</block>
				</view>
				<view class="item_b">浏览量{{ details.browse || details.views || 0 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noMoreData: false,
				lastPage: 1,
				page: 1,
				imgList: [],
				details: {},
				id: '',
				content: '',
				textareaHeight: 74,
				keyboardHeight: 0,
				list: [],
				type: '',
			};
		},
		onLoad(opt) {
			if(opt.type) {
				this.type = opt.type;
			}
			this.id = parseInt(opt.id);
			uni.onKeyboardHeightChange(res => {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync()
				this.keyboardHeight = Math.round(res.height * (750 / windowWidth))
			})
			this.getDetails();
			
		},
		onShareAppMessage(res) {
			console.log('厨房了')
			if (res.from === 'button') {
				let path = `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`
				return {
					title: this.details.content,
					path: path,
				};
			}
			if (res.from === 'menu') {
				return {
					title: '研学说',
					path: `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`,
				};
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '研学说',
				path: `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`,
			};
		},
		methods: {
			async onGiveLike(id) {
				const res = await this.$api.post(`community/note/like/${id}`, {});
				console.log(res, "点赞")
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					setTimeout(() => {
						this.getDetails()
					}, 500)
				}
			},
			getImg(imgs) {
				const imgLisit = imgs.split(',')
				this.imgList = imgs.split(',')
				return imgs.split(',')
			},
			async getDetails() {
				if(this.type == 1) {
					const res = await this.$api.get(`ebTrusteeshipStyle/detail`, {
						id: this.id,
					});
					if (res.code == 200) {
						console.log('数据：',res);
						if(res.data.image) {
							var str = res.data.image.replace(/\[/g, '');
							str = str.replace(/]/g,'');
							str = str.replace(/"/g,'');
							res.data.image = str;
							res.data.imgs = str.split(',');
							// console.log(v.imgs,str)
						}else {
							res.data.imgs = []
						}
						this.details = res.data
					}
				} else {
					const res = await this.$api.get(`competition/work/show/detail`, {
						id: this.id,
					});
					if (res.code == 200) {
						console.log('数据：',res);
						var str = res.data.content;
						str = str.replace(/wscnph/g, 'wscnph maxImg');
						str = str.replace(/<img/g, '<img style="max-width:100% !important;height:auto;"');
						res.data.content = str;
						this.details = res.data
					}
				}
			},
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.details.imagesList,
				});
			},
			openComment(item, index) {
				this.$set(this.list[index], 'isOpen', true)
			}
		}
	}
</script>

<style lang="scss">
	p {
		text-indent: 2em;
	}
	.maxImg {
		width: 100%;
		max-width:100% !important;
		height:auto;
	}
	#shareBtn {
		background: #fff;
		border: none;
		
	}
	button::after{
	 	border: none;
	}

	.item_b {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		display: flex;
		justify-content: space-between;

		>view {
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			text {
				font-size: 24rpx;
				margin-left: 12rpx;
			}
		}

		.read_count {
			color: #999999;
			font-size: 24rpx;
		}
	}

	video {
		width: 100%;
		height: 400rpx;
	}

	.evaluateTalk {
		.talk {
			padding: 26rpx 54rpx 40rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			// border-bottom: 20rpx solid #F7F7F7;

			.talk_t {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.author {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 14rpx;
						background-color: #F7F7F7;
					}

					.author_name {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						margin-bottom: 14rpx;
					}

					.time {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #B3B3B3;
					}
				}
			}

			.talk_b {
				.article_text {
					font-size: 26rpx;
					line-height: 40rpx;
					margin-bottom: 16rpx;
					word-wrap: break-word;
					word-break: break-all;
				}

				.article_imgs {
					display: grid;
					grid-template-columns: repeat(3,1fr);
					// grid-gap: 30rpx;
					image {
						width: 206rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-top: 12rpx;
					}

					image:not(:last-child) {
						// margin-right: 12rpx;
					}
				}
				
				.item_b {
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
				}
			}
		}

		.comment_list {
			padding: 40rpx 54rpx 120rpx;
			box-sizing: border-box;

			.title {
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 48rpx;
			}

			.list {
				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 60rpx;

					.avatar {
						image {
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
							background-color: #F5F5F5;
						}
					}

					.comment_info {
						flex: 1;
						margin-left: 20rpx;

						.comment_top {
							display: flex;
							justify-content: space-between;

							.user_name {
								font-size: 26rpx;
								line-height: 30rpx;
							}

							.time {
								font-size: 20rpx;
								line-height: 20rpx;
								color: #B3B3B3;
								padding: 10rpx 0;
							}

							.likes {
								padding-top: 34rpx;
								display: flex;
								align-items: center;

								image {
									width: 34rpx;
									height: 32rpx;
								}

								>text {
									font-size: 26rpx;
									line-height: 26rpx;
									margin-left: 10rpx;
								}
							}
						}

						.comment_text {
							font-size: 26rpx;
							line-height: 32rpx;
							margin-bottom: 22rpx;
						}

						.sub_comment_list {
							width: 100%;
							background-color: #F5F5F5;
							padding: 20rpx 18rpx;
							box-sizing: border-box;
							border-radius: 6rpx;

							.sub_comment_item {
								font-size: 24rpx;
								line-height: 32rpx;

								.user_name {
									color: #F5445A;
								}
							}

							.sub_comment_item:not(:last-child) {
								// margin-bottom: 28rpx;
							}

							.total_count {
								display: flex;
								align-items: center;
								padding: 6rpx 0;
								font-size: 24rpx;
								color: #999;

								>text {
									margin-right: 10rpx;
								}
							}
						}
					}


				}
			}
		}

		.send_box {
			width: 100%;
			padding: 20rpx 26rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;

			.input_box {
				width: 534rpx;
				min-height: 74rpx;
				position: relative;
				background-color: #F5F5F5;
				border-radius: 14rpx;

				textarea {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					z-index: 9;
				}

				.msg_text {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					opacity: 0;
				}
			}

			.send_btn {
				width: 130rpx;
				height: 74rpx;
				border-radius: 14rpx;
				text-align: center;
				line-height: 74rpx;
				background-color: #2E80FE;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>